<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  font-size: 14px;
}

.nav {
  margin: 50px;
}

.nav>li {
  position: relative;
  float: left;
  width: 80px;
  height: 41px;
  text-align: center;
  border: 1px solid black;
}

.nav li a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 41px;
  color: #333;
}

.nav>li>a:hover {
  background-color: red;
}
.nav ul {
  display: none;
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  border-left: 1px solid #FECC5B;
  border-right: 1px solid #FECC5B;
}

.nav ul li {
  border-bottom: 1px solid #FECC5B;
}

.nav ul li a:hover {
  background-color: blue;
}
  </style>
</head>
<body>
  <ul class="nav">
    <li>
      <a href="#">微博</a>
      <ul style="display: none;" >
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">留言板</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">电话</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">邮箱</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
  </ul>
  <script>
     var nav = document.querySelector(".nav")

     
     for(var i=0;i<nav.children.length;i++)
     {
        var node =    nav.children[i];
        node.onmouseover = function(){
             this.children[1].style.display="block"
        }
        node.onmouseout = function(){
             this.children[1].style.display="none"
        }
       
     }
  </script>
</body>
</html>